<template>
  <div class="dashboard-container" id="index" ref="appRef">
    <!-- 顶部标题区域 -->
    <div class="header">
      <span class="logo"></span>
      <h1 class="title"></h1>
      <div class="time-weather header-right-box">
        <div>{{ currentDate }}</div>
        <div>{{ currentTime }}</div>
        <div>{{ getWeekDay() }}</div>
        <img style="margin-right: 6px; margin-top: 4px" src="../assets/images/天气.png" alt="" />
        <div>{{ temperature }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// import { useRouter } from 'vue-router';
// const router = useRouter();

// const currentTab = ref('可信数据空间');

// 模拟时间和天气数据，实际可通过接口获取
const currentDate = ref('');
const currentTime = ref('');
const temperature = ref('19 - 29℃');

// 模拟获取星期几
const getWeekDay = () => {
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const now = new Date();
  return weekDays[now.getDay()];
};

const goPage = (item) => {
  console.log(item.url);
  if (item.url) {
    // 打开新标签进行跳转
    window.open(item.url, '_blank');

    // 在当前标签进行跳转
    // router.push(item.url);

    // 不打开新标签进行跳转
    // window.location.href = item.url;
  } else {
    alert('暂未设置链接');
  }
};

onMounted(() => {
  // 初始化日期时间
  const updateTime = () => {
    const now = new Date();
    currentDate.value = `${now.getFullYear()}/${(now.getMonth() + 1).toString().padStart(2, '0')}/${now.getDate().toString().padStart(2, '0')}`;
    currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
  };
  updateTime();
  setInterval(updateTime, 1000);
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100vw;
  height: 100vh;
  background-color: #0b1b38;
  color: #fff;
  overflow: hidden;
  position: relative;
  background-size: 100% 100%;
  position: relative;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    background-size: cover;
    position: relative;
    z-index: 2;
    .logo {
      font-size: 20px;
      font-weight: bold;
    }
    .title {
      font-size: 24px;
    }
    .time-weather {
      font-size: 14px;
      margin-top: -16px;
      display: flex;
      align-items: center;
      color: #fff;

      & > div {
        margin-right: 20px;
      }
    }
  }
}
</style>
